<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

// 页面加载后执行
onMounted(() => {
  // 可以添加页面加载动画等逻辑
});

// 路由实例，用于返回首页
const router = useRouter();

// 返回首页方法
const goToHome = () => {
  router.push('/');
};
</script>

<template>
  <div class="notFound">
    <a-card class="card-container">
      <template #title>
        <span class="title">页面未找到</span>
      </template>

      <div class="content">
        <!-- 嵌入404 SVG图像 -->
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 800 600"
            width="100%"
            height="400"
            class="svg-image"
        >
          <!-- 背景 -->
          <rect width="800" height="600" fill="#f8f9fa" />

          <!-- 装饰元素 - 几何图形 -->
          <circle cx="100" cy="100" r="50" fill="#e9ecef" opacity="0.7" />
          <circle cx="700" cy="500" r="80" fill="#e9ecef" opacity="0.7" />
          <rect x="600" y="100" width="60" height="60" rx="10" fill="#e9ecef" opacity="0.7" />
          <rect x="100" y="450" width="80" height="80" rx="10" fill="#e9ecef" opacity="0.7" />

          <!-- 404文字 -->
          <g font-family="Arial, sans-serif" text-anchor="middle">
            <!-- 数字4 -->
            <path d="M250,200
                     C250,150 300,150 300,200
                     C300,250 250,250 250,200
                     L250,350
                     C250,400 300,400 300,350
                     C300,400 350,400 350,350
                     L350,200
                     C350,150 300,150 300,200
                     C300,150 250,150 250,200 Z"
                  fill="#3498db" />

            <!-- 数字0 -->
            <circle cx="450" cy="275" r="75" fill="none" stroke="#3498db" stroke-width="30" />

            <!-- 数字0 -->
            <circle cx="600" cy="275" r="75" fill="none" stroke="#3498db" stroke-width="30" />
          </g>
        </svg>

        <div class="message-container">
          <p class="message">您请求的页面不存在或已被移动</p>
          <a-button
              type="primary"
              @click="goToHome"
              class="home-button"
          >
            返回首页
          </a-button>
        </div>
      </div>
    </a-card>
  </div>

</template>

<style scoped>
.notFound {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  padding: 20px;
}

.card-container {
  width: 100%;
  max-width: 800px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #1d2129;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
}

.svg-image {
  max-width: 100%;
  height: auto;
}

.message-container {
  margin-top: 20px;
  text-align: center;
}

.message {
  font-size: 16px;
  color: #4e5969;
  margin-bottom: 24px;
}

.home-button {
  padding: 8px 24px;
  font-size: 14px;
}


</style>
